{% extends "base.html" %}

{% load static %}

{% block content %}
    <div class="goods_type">
        <!-- 1.需传入商品名称 -->
        <div class="goods_details"><a href="#">首页</a> >{{ goods_obj.goods_name }}</div>
        <div class="goods_box">
            <!-- 2.需传入商品图片url -->
            <div class="box_pic"><img src="{% static goods_obj.image_set.first.img_address.name %}"/></div>
            <div class="box_details">
                <!-- 3.需传入商品id -->
                <form method="post" action="/Buyer/car_jump/?id={{ goods_obj.id }}">
                    {% csrf_token %}
                    <!-- 4.需传入商品名称 -->
                    <h1>{{ goods_obj.goods_name }}</h1>
                    <!-- 5.需传入商品描述 -->
                    <span style='font-size: 15px;'>{{ goods_obj.goods_description|safe }}</span>

                    <div class="box_bg">
                        <!-- 6.需传入商品现价 -->
                        价格：￥<span class="price_span">{{ goods_obj.goods_cprice }}</span>
                        <!-- 7.需传入商品原价 -->
                        元&nbsp;&nbsp;原价:￥<s style='color: #ff0000'> {{ goods_obj.goods_oprice }}</s></div>
                    <div class="address">配送:  顺丰快递</div>
                    <div class="address">存储方:  适宜的环境</div>
                    <!-- 8.需传入商品库存数 -->
                    <div class="address">库存:  {{ goods_obj.goods_kucun }}</div>

                    <div class="num">数量：
                        <input type="button" name="-" value="-" class="btn1" onclick="dec()"/>
                        <input type="text" value="1" id="count" name="count" class="text1"/>
                        <input type="button" name="+" value="+" class="btn1" onclick="add()"/>
                    </div>
                    {#携带商品名称 到购物车中间页面#}
                    <!-- 9.需传入商品名称 -->
                    <input type="hidden" name="goods_name" value="{{ goods_obj.goods_name }}">
                    {#携带商品价格 到购物车中间页面#}
                    <!-- 10.需传入商品现价 -->
                    <input type="hidden" name="goods_cprice" value="{{ goods_obj.goods_cprice }}">
                    {#添加购物车携带图片#}
                    <!-- 11.需传入商品图片url -->
                    <input type="hidden" name="goods_img_path" value="{{ goods_obj.image_set.first.img_address.name }}">
                    <div class="btn2"><input type="submit" value="加入购物车" class="gouwu"/></div>
                </form>
            </div>
            <div class="goods_heat_big_div">
                <div class="goods_heat_big_title">商品热度</div>
                <!-- 12.需传入商品销售量 -->
                <div class="goods_heat_title">销售量:{{ goods_obj.goods_sales }}</div>
                <!-- 13.需传入商品评论量 -->
                <div class="goods_heat_title">评论量:{{ goods_comment_list.count }}</div>
                <!-- 14.需传入商品浏览量 -->
                <div class="goods_heat_title">浏览量:{{ goods_obj.goods_browses }}</div>
                <!-- 15.需传入商品收藏量 -->
                <div class="goods_heat_title">收藏量:{{ goods_collect_list.count }}</div>
                <!-- 16.需传入商品id -->
                <a href="/Buyer/goods_collection/?id={{ goods_obj.id }}&collect_state=1" class="goods_a1">我要收藏</a>
                <!-- 17.需传入商品id -->
                <a href="/Buyer/goods_collection/?id={{ goods_obj.id }}&collect_state=0" class="goods_a2">取消收藏</a>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var count;

        function add() {
            count = document.getElementById('count').value;

            var xiancun = document.getElementById('count').value;
            <!-- 18.需传入商品库存数 -->
            var kucun1 = {{ goods_obj.goods_kucun }}
            if (xiancun >= kucun1 ) {
                <!-- 19.需传入商品库存数 -->
                <!-- 20.需传入商品库存数 -->
                alert("库存为:" + {{ goods_obj.goods_kucun }}+ ",您已经超出库存！")

                document.getElementById('count').value = {{ goods_obj.goods_kucun }}
            }
            else {
                count++;
                document.getElementById('count').value = count;
            }

        }

        function dec() {
            count = document.getElementById('count').value;
            count--;
            if (document.getElementById('count').value <= 1) {
                document.getElementById('count').value = 1
            }
            else {
                document.getElementById('count').value = count;
            }
        }
    </script>
    <div class="goods_type1">
        <div class="type1_left">
            <div class="type1_top">其他商品</div>
            <div class="type1_bottom">

                {% for goods_obj in goods_list %}
                    <!-- 21、需完善a标签href属性 -->
                    <a href="/Buyer/goods_details/?id={{ goods_obj.id }}">
                        <dl>
                            <!--22.需完善img标签src属性 -->
                            <dt><img src="{% static goods_obj.image_set.first.img_address.name %}"/></dt>
                            <dd>
                                <!-- 23.需传入商品名称 -->
                                <span class="pname">{{ goods_obj.goods_name }}</span>
                                <!-- 24.需传入商品现价 -->
                                <p class="price">￥{{ goods_obj.goods_cprice }}</p>
                            </dd>
                        </dl>
                    </a>
                {% endfor %}

            </div>
        </div>

        <div class="goods_details_div">
            <!-- 25.需完善form标签action属性 -->
            <form method="post" action="/Buyer/goods_details/">
                {% csrf_token %}
                <input type="hidden" name="spxq" value="商品详情">
                <!-- 26.需传入商品id -->
                <input type="hidden" name="id" value="{{ goods_obj.id  }}">
                <input type="submit" value="商品详情" class="type1_top"/>
            </form>
        </div>

        <div class="goods_details_div">
            <!-- 27.需完善form标签action属性 -->
            <form method="post" action="/Buyer/goods_comments/">
                {% csrf_token %}
                <input type="hidden" name="sppl" value="商品评论">
                <!-- 28.需传入商品id -->
                <input type="hidden" name="id" value="{{ goods_obj.id  }}">
                <input type="submit" value="商品评论" class="type1_top"/>
            </form>

        </div>
        <div class="goods_pl_div" id="goods_pl_id">
            <div class="type1_bottom">

            <!--

                特别提示:31到38可以不用做的(^_^)

            -->

               <div class="comment_box1">

                   <div class="qb_comment">
                       <input type="submit" value="全部评论" class="comment_submit" id="qbpl">
                   </div>

                   <div class="comment_form">
                        <input type="submit" value="好评" class="comment_submit" id="hp">
                   </div>

                   <div class="comment_form">
                        <input type="submit" value="中评" class="comment_submit" id="zp">
                   </div>

                   <div class="comment_form">
                        <input type="submit" value="差评" class="comment_submit" id="cp">
                   </div>

               </div >

                <div id="removepl">

                    {% for goods_comment in goods_comment_list %}
                    <div class="comment_box1">
                        <table>
                            <tr>
                                <td style="width: 200px; height: 80px">用户: {{ goods_comment.buyer.name }}</td>
                                <td style="width: 600px; height: 80px">{{ goods_comment.comment_statement }}</td>
                                <td style="width: 200px; height: 80px">{{ goods_comment.comment_time }}</td>
                            </tr>
                        </table>
                    </div>
                {% endfor %}
                </div>
            </div>
        </div>
    </div>
    <script>
        (function () {
            console.log('func')
        })()


        function establish_dom(name, comment, time){
            var pl_div = $("<div></div>").addClass("comment_box1")
            $("#removepl").append(pl_div);

            var pl_table = $("<table></table>");
            pl_div.append(pl_table);

            var pl_tr = $("<tr></tr>");
            pl_table.append(pl_tr);

            var pl_name = $("<td></td>").css({"width": "200px", "height": "80px"}).text("用户: " + name);
            pl_tr.append(pl_name);

            var pl_comment = $("<td></td>").css({"width": "600px", "height": "80px"}).text(comment);
            pl_tr.append(pl_comment);

            var pl_time = $("<td></td>").css({"width": "200px", "height": "80px"}).text(time);
            pl_tr.append(pl_time);

        }

        function ajax_for(but_num){
            // ajax
            $.ajax(
                {
                    url: "/Buyer/goods_comments/",
                    type: "POST",
                    dataType: "json",
                    data: {
                        "id": {{ goods_obj.id  }},
                        "but": but_num
                    },
                    success: function (data) {
                        console.log(data)
                        $("#removepl").empty();
                        let datas = data["msg"]["goods_comment"]

                        for(var i = 0; i < data["msg"]["goods_comment"].length; i++){
                            let comment = datas[i];
                            console.log(comment);
                            establish_dom(comment.name, comment.comment, comment.time);
                        }
                    }
                }
            )
        }

        $(
            function () {
                // 监听全部评论按钮， but=1表示全部评论
                $("#qbpl").click(
                    function () {
                        // ajax
                        ajax_for(1)
                    }
                )

                // 监听好评按钮，but=2表示好评按钮
                $("#hp").click(
                    function () {
                        // ajax
                        ajax_for(2)
                    }
                )

                // 监听中评按钮，but=3表示中评按钮
                $("#zp").click(
                    function () {
                        // ajax
                        ajax_for(3)
                    }
                )


                // 监听差评按钮，but=4表示差评按钮
                $("#cp").click(
                    function () {
                        // ajax
                        ajax_for(4)
                    }
                )



            }
        )
</script>

{% endblock %}